//全局数据定义
var newPicArry=getNewPicArray(document.getElementsByClassName
("first")[0]);
var len=newPicArry.length;
//console.log(newPicArry);
//定时器开关标志
var flag;
//图片开始位置
var current=0;
//1  显示对应标题，图片，链接
function showPic(whichPic) {
    //显示新闻图片的对象
    var placeholder=document.getElementById("placeholder");
    //显示新闻标题和链接的对象
    var description= document.getElementById("description");
    console.log(description);
    //显示内容数据
    //图片
    var imgSrc=whichPic.getAttribute("data-image");
    //标题
    var newTitle=whichPic.getAttribute("title");
    //链接地址
    var url=whichPic.getAttribute("data-url");
    console.log(imgSrc+"|"+newTitle+"|"+url);
    //设置内容
    placeholder.setAttribute("src",imgSrc);
    description.setAttribute("href",url);
    description.innerText= newTitle;

    whichPic.parentElement.style.backgroundColor="#ff0000";
}

//2  默认显示的图片新闻  获得li.first的子标签
//console.log(document.getElementsByClassName("first")[0].firstChild);
//showPic(document.getElementsByClassName("first")[0].firstChild);

//3  图片轮播 （定时器）setInterval   setTimeout
//获取图片新闻的相关数据,访问图片新闻（li），相关数据存放到集合中
function getNewPicArray(cur) {
    var _arr=[];
    while(cur && cur.nodeType===1){
        _arr.push(cur);
        cur=cur.nextElementSibling;
    }
    return _arr;
}


//图片新闻轮播显示
function circleShowPic() {
    showPic(newPicArry[current].firstChild);
    flag=setInterval(function () {
        current=++current>len-1?0:current;
        showPic(newPicArry[current].firstChild);
        newPicArry[current===0?len-1:current-1]
            .removeAttribute("style")
    },3000);
}

//4 更改后的a标签点击处理：重新开始图片轮播（重置定时器）
function clickShowPic() {
    //停止定时器
    clearInterval(flag);
    //去除图片轮播中当前li标签的背景颜色
    newPicArry[current].removeAttribute("style");
    //获取点击的索引,利用a标签的文本信息
    current=parseInt(whichPic.innerText)-1;
    //开始定时器
    circleShowPic();
}

circleShowPic();
